<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div id="app">-->
<!--<div>-->
<!--你好-->
<!--</div>-->
<!--</div>-->

<div id="app">
    <ul>

        <todo-item v-for="item,index in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id"></todo-item>
    </ul>
    <component1></component1>
    <div>{{name}}</div>
    <button onclick="add()">点击添加</button>
</div>


<div id="app2">
    <span v-once>
           值不会改变
        {{message}}
    </span>


    <span v-html="html"></span>

    <span v-if="show">看不懂</span>



</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    Vue.component('todo-item', {
        props: ['item', 'index'],
        template: '<li>{{index}}-{{item.text}}</li>'
    })


    const component1 = {template: '<input type="text" value="你好">'}

    function add() {
        vm.items.push({text: '新乡'})
    }


    var data = {
        name: '张三',
        items: [
            {id: 1, text: '广东'}
        ]
    }
    //冻结值为只读
    //Object.freeze(obj)

    // Vue 根实例
    const vm = new Vue({
        el: "#app",
        data: data,
        components: {
            'component1': component1
        },
        computed: {},

        methods: {},
        created() {

        },
        mounted() {
            console.log('name is' + name);//null
            console.log('name is' + this.name);
            console.log('name is' + this.$data.name)
        }
    })

    vm.$watch('name', function (newv, oldv) {
        console.log('心智' + newv);
        console.log('就只' + oldv);

    })


    vm2 = new Vue({
        el: "#app2",
        // template:'<h1>第二个实例</h1>'
        data: {
            message: '面积',
            html: `<table style="font-size: large; align-items: center;background-color: chartreuse">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
             </tr>
            </table>`,
            show: 0,//show的值为0，undefined，false，null不展示
        },
        // show() {
        //
        //     alert(3333)
        //
        // }
        methods: {
            show:function () {
                console.log(797979)
            }
        }
    })
</script>
</body>
</html>